<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Radio - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Radio - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" class="radio-test outer-content">
        <ion-list>
          <ion-radio-group id="pizzaToppings">
            <ion-item-divider>
              <ion-label>Pizza Toppings (Unchecked Group)</ion-label>
            </ion-item-divider>
            <ion-item>
              <ion-label>Pepperoni</ion-label>
              <ion-radio slot="start" value="pepperoni" id="groupedRadio"></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>Sausage</ion-label>
              <ion-radio slot="start" value="sausage"></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>Pineapple</ion-label>
              <ion-radio slot="start" value="pineapple"></ion-radio>
            </ion-item>
          </ion-radio-group>
          <ion-list>
            <ion-radio-group id="fruitRadio" value="grape">
              <ion-item-divider>
                <ion-label>Fruits (Group w/ values)</ion-label>
              </ion-item-divider>
              <ion-item>
                <ion-label>Apple</ion-label>
                <ion-radio slot="start" value="apple"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>Grape, checked, disabled</ion-label>
                <ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>Cherry</ion-label>
                <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
              </ion-item>
            </ion-radio-group>

            <ion-radio-group id="pizzaRadio" value="pepperoni">
              <ion-item-divider>
                <ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
              </ion-item-divider>
              <ion-item>
                <ion-label>Pepperoni</ion-label>
                <ion-radio slot="end" name="pepperoni" value="pepperoni" id="pepperoni-radio"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>Sausage</ion-label>
                <ion-radio slot="end" color="danger" name="sausage" value="sausage"></ion-radio>
              </ion-item>
            </ion-radio-group>

            <ion-radio-group id="veggiesRadio" value="broccoli" allow-empty-selection>
              <ion-item-divider>
                <ion-label>Veggies (Group w/ allow empty)</ion-label>
              </ion-item-divider>
              <ion-item>
                <ion-label>Carrot</ion-label>
                <ion-radio slot="end" value="carrot"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>Tomato</ion-label>
                <ion-radio slot="end" value="tomato"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>Broccoli</ion-label>
                <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli"></ion-radio>
              </ion-item>
            </ion-radio-group>

            <ion-radio-group allow-empty-selection value="custom">
              <ion-item-divider>
                <ion-label>Custom (Group w/ allow empty)</ion-label>
              </ion-item-divider>

              <ion-item>
                <ion-label>Custom</ion-label>
                <ion-radio
                  slot="end"
                  color="danger"
                  value="custom"
                  style="--border-radius: 2px; --inner-border-radius: 10px 0px 10px 0px"
                ></ion-radio>
              </ion-item>
            </ion-radio-group>

            <ion-radio-group allow-empty-selection value="custom">
              <ion-item-divider>
                <ion-label>Part (Group w/ allow empty)</ion-label>
              </ion-item-divider>

              <ion-item>
                <ion-label>Radio ::part</ion-label>
                <ion-radio slot="end" value="custom" class="radio-part"></ion-radio>
              </ion-item>
            </ion-radio-group>

            <ion-item>
              <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small"
                >Checked</ion-button
              >
              <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small"
                >Disabled</ion-button
              >
              <ion-button slot="end" onClick="printRadioValues()" fill="outline" size="small">Print</ion-button>
              <ion-button
                slot="end"
                onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')"
                fill="outline"
                size="small"
                color="danger"
                >Color</ion-button
              >
            </ion-item>
          </ion-list>

          <pre id="valuesCode"></pre>

          <ion-list>
            <ion-list-header>
              <ion-label> No Radio Group </ion-label>
            </ion-list-header>
            <ion-item>
              <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
              <ion-radio slot="start" color="secondary" id="ungroupedRadio"></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
              <ion-radio slot="end" color="danger"></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>Checkbox right side</ion-label>
              <ion-radio slot="end"></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
              <ion-icon name="information-circle" slot="end"></ion-icon>
            </ion-item>
          </ion-list>

          <p>
            <ion-radio id="standAloneChecked"></ion-radio>
            Stand-alone checkbox:
            <span id="standAloneCheckedSpan"></span>
          </p>

          <ion-item>
            <ion-label>Checkbox / Toggle</ion-label>
            <ion-radio slot="start" id="checked"></ion-radio>
            <ion-toggle id="checked"></ion-toggle>
          </ion-item>
          <ion-radio-group>
            <ion-item>
              <ion-label>Checked</ion-label>
              <ion-radio slot="start" checked></ion-radio>
              <ion-toggle checked></ion-toggle>
            </ion-item>
          </ion-radio-group>
          <ion-item>
            <ion-label>Disabled</ion-label>
            <ion-radio slot="start" disabled></ion-radio>
            <ion-toggle disabled></ion-toggle>
          </ion-item>
        </ion-list>
      </ion-content>

      <script>
        const radio = document.getElementById('pepperoni-radio');
        if (radio) {
          radio.addEventListener('ionSelect', (ev) => {
            console.log(ev.detail);
          });
        }
        var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
        printRadioValues();

        function printRadioValues() {
          var html = 'Values:<br>';

          for (var i = 0; i < radioValues.length; i++) {
            var radio = radioValues[i];
            var el = document.getElementById(radio);
            html += '<span>' + radio + ': ' + el.value + ' </span><br>';
          }

          var valueEle = document.getElementById('valuesCode');
          valueEle.innerHTML = html;
        }

        function toggleBoolean(id, prop) {
          var el = document.getElementById(id);

          var isTrue = el[prop] ? false : true;
          el[prop] = isTrue;
          console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
        }

        function toggleString(id, prop, firstVal, secondVal) {
          var el = document.getElementById(id);

          var stringVal = el[prop] == firstVal ? secondVal : firstVal;
          el[prop] = stringVal;
          console.debug('in toggleString, setting', prop, 'to', stringVal);
        }
      </script>

      <style>
        .outer-content {
          --background: #f2f2f2;
        }

        .radio-test pre {
          background: #f6f6f6;
          border: 1px solid #ddd;
          padding: 15px 10px;
          margin-top: -20px;
        }

        .radio-part::part(container) {
          background: rgba(255, 0, 0, 0.3);
          border-color: darkred;
        }

        .radio-part::part(mark) {
          background: hotpink;
        }

        .radio-part.radio-checked::part(container) {
          background: rgba(0, 255, 0, 0.3);
          border-color: darkgreen;
        }

        .radio-part.radio-checked::part(mark) {
          background: purple;
        }
      </style>
    </ion-app>
  </body>
</html>
